$search-br: 600px;

.control-searchbox {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($dark,0.5);
  z-index: 102;
  .search-box{
    position: absolute;
    top: 110px;
    left: 50%;
    z-index: 1002;
    width: calc(100% - 20px);
    max-width: 500px;
    box-shadow: $shadow1;
    background: $white;
    @include transform(translate(-50%,0%));
    @media (min-width: $br-mobileMap){
      width: 100%;
      top: 300px;
    }
    // Kinds of search
    .searching-kinds {
      display: block;
      position: absolute;
      bottom: 100%;
      left: 0px;
      font-size: 80%;
      color: #fff;
      font-weight: 100;
      z-index: 2;
      .kind {
        display: block;
        background-color: #c9c9c9;
        padding: 10px;
        cursor: pointer;
        float: left;
        margin: 0 0 0 2px;
        @media (min-width: $br-mobileMap){
          padding: 5px 10px;
        }
        &:first-child{
          margin: 0;
        }
        // &:nth-child(even) {
        //   border-left:  1px solid white;
        //   border-right: 1px solid white;
        // }
      }
      .selected {
        background-color: #fff;
        color: #7B7B7B;
      }
    }

    // Selected mode
    .search:not(.selected) {
      display: none;
    }

    // Inputs

    .search-input {
      margin: 0;
      padding: 13px 40px 10px 10px;
      width: 100%;
      outline: 0;
      border: none;
      font-size: 18px;
      border-radius: 0;
      font-family: inherit;
      background: image-url('svg-map/control-search.svg') no-repeat 98.5% center;
      background-size: auto 60%;
    }

    .coordinates, .degrees, .utm {
      padding: 0 20px 15px;
      @media (min-width: $search-br){
        @include display-flex();
        @include justify-content(space-between);
        @include align-items(center);
        padding: 0 10px;
      }
      button {
        width: 100%;
        margin: 10px 0 0;
        @media (min-width: $search-br){
          width: auto;
          margin: 0 0 0 10px;
        }
      }
    }

    .coord-box , .deg-box, .utm-box {
      @media (max-width: $search-br){
        @include display-flex();
        @include justify-content(space-between);
        @include align-items(center);
      }
      input{
        padding: 0;
        outline: 0;
        border: none;
        border-bottom: 1px solid $dark;
        font-size: 18px;
        border-radius: 0;
        font-family: inherit;
        &.coord-input {
          text-align: right;
          margin: 13px 0 9px;
          @media (min-width: $search-br){
            width: 34px;
          }
        }
        &.deg-input {
          text-align: left;
          margin: 13px 8px 9px;
          @media (min-width: $search-br){
            max-width: 120px;
          }
        }
        &.utm-input {
          text-align: left;
          margin: 13px 8px 9px;
          @media (min-width: $search-br){
            max-width: 100px;
          }
          &.is-little {
            @media (min-width: $search-br){
              max-width: 44px;
            }
          }
        }
      }
    }
    .deg-box, .utm-box {
      @include display-flex();
      @include justify-content(space-between);
      @include align-items(center);
      span{
        width: 50px;
        @media (min-width: $search-br){
          width: auto;
        }
      }
      .deg-input, .utm-input {
        margin: 13px 0 9px 0;
        padding: 0;
        text-align: left;
        outline: 0;
        border: none;
        border-bottom: 1px solid $dark;
        font-size: 18px;
        border-radius: 0;
        font-family: inherit;
      }
    }
    .coord-input {
    }

  }
}
